---
layout: example
category: example
title: Get features under the mouse pointer
description: Using the queryRenderedFeatures API to show properties of hovered-over map elements.
---
<style>
    #features {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 300px;
        overflow: auto;
        background: rgba(255, 255, 255, 0.8);
    }
</style>
<div id='map'></div>
<pre id='features'></pre>
<script>

mapboxgl.util.getJSON('https://api.mapbox.com/styles/v1/mapbox/streets-v8?access_token=' + mapboxgl.accessToken, function (err, style) {
    if (err) throw err;

    style.layers.forEach(function (layer) {
        layer.interactive = true;
    });

    var map = new mapboxgl.Map({
        container: 'map',
        style: style,
        center: [-96, 37.8],
        zoom: 3
    });

    map.on('mousemove', function (e) {
        var features = map.queryRenderedFeatures(e.point);
        document.getElementById('features').innerHTML = JSON.stringify(features, null, 2);
    });
});
</script>
